<template>
  <!-- 顶部菜单栏 -->
  <div id="topCom" v-if="isShow">
    <!-- 左边容器 -->
    <div class="left">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{
          $t('navbar.home')
        }}</el-breadcrumb-item>
       
      </el-breadcrumb>
    </div>
    <div class="right">
      <!-- 查询 -->
      <div class="query">
        <span><i class="el-icon-search"></i></span>
      </div>
      <!-- 消息 -->
      <div class="message">
        <span><i class="el-icon-bell"></i></span>
      </div>
      <!-- 切换 -->
      <div class="switch">
        <el-dropdown trigger="click" @command="handleCommand" placement="bottom" >
          <span class="el-dropdown-link">
            <!-- 图标 -->
            <svg t="1676543460711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1264" width="18" height="18">
              <path d="M568.25 483.78125h-8.0625l30.9375 172.5c20.53125-7.40625 39.09375-18.1875 55.5-32.53125-16.78125-20.53125-30.65625-43.3125-41.15625-67.6875l32.625-4.21875c9 18.46875 19.3125 34.78125 30.9375 48.84375 24.09375-29.25 42.65625-68.25 55.59375-117l-156.375 0.09375z m123.1875 140.0625c18.5625 16.125 39.75 27.84375 63.5625 35.15625l14.90625 4.59375-8.71875 31.78125-14.90625-4.59375c-28.59375-8.71875-54.9375-23.71875-77.25-43.6875-20.90625 18.75-45.375 33.09375-72 42L617.9375 805.25H493.71875l-16.6875 75.9375h389.25c18.28125 0 33.09375-14.8125 33.09375-33.09375V285.125c0-18.28125-14.8125-33.09375-33.09375-33.09375H518.5625l25.875 144.28125-1.03125-0.375 3 15.84375 0.46875-2.0625 7.3125 41.0625h80.25v-33.09375h62.0625v33.09375h103.5V483.875h-43.125c-14.4375 58.125-36.1875 104.90625-65.4375 139.96875zM459.78125 805.0625H157.71875c-36.5625 0-66.1875-29.625-66.1875-66.1875V175.90625c0-36.5625 29.625-66.1875 66.1875-66.1875h331.125l20.8125 109.21875h356.53125c36.5625 0 66.1875 29.625 66.1875 66.1875v562.96875c0 36.5625-29.625 66.1875-66.1875 66.1875H435.78125l24-109.21875z m-156.46875-255v-34.78125h-65.4375v-51.28125h60.84375V429.5h-60.84375v-43.6875h65.4375v-34.5H199.8125v198.65625h103.5z m159.9375 0V450.96875c0-18-4.125-31.78125-12.375-41.4375-8.25-9.5625-20.4375-14.34375-36.375-14.34375-9.375 0-17.71875 1.875-25.03125 5.625-7.3125 3.75-13.3125 9.46875-17.25 16.6875h-2.0625l-5.0625-19.40625h-28.6875v151.96875h37.5v-71.53125c0-17.90625 2.34375-30.75 7.03125-38.53125 4.59375-7.78125 12.28125-11.625 22.78125-11.625 7.6875 0 13.3125 2.71875 16.78125 8.25 3.5625 5.53125 5.34375 13.6875 5.34375 24.65625v88.78125H463.25z" p-id="1265" ></path>
            </svg>
          </span>
          <el-dropdown-menu id="selectZE" slot="dropdown">
            <el-dropdown-item command="zh" v-bind:style="[this.$i18n.locale == 'zh' ? zeActive : '']" >简体中文</el-dropdown-item >
            <el-dropdown-item command="en" v-bind:style="[this.$i18n.locale == 'en' ? zeActive : '']" >English</el-dropdown-item >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 用户 -->
      <div class="user">
        <div class="head"></div>
        <span>admin</span>
      </div>
      <!-- 设置 -->
      <div class="setting">
        <span><i class="el-icon-setting"></i></span>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: "TopCom",
  props: {},
  data() {
    return {
      zeActive: {
        background: "rgb(64, 158, 255)",
        color: "rgb(244, 244, 245)",
      }
    };
  },
  computed: {
    ...mapState(['isShow'])
  },
  methods: {
    // 中英文切换
    handleCommand(command) {
      this.$i18n.locale = command;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
// 顶部
#topCom {
  margin: 0;
  padding: 0;
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #EBEEF5;
  border-bottom: 1px solid #EBEEF5;
  // 右边
  .left {
    width: 100%;
    margin-left: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    // 鼠标悬浮样式
    :hover {
      color: #409eff;
    }
  }
  // 右边
  .right {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    :hover {
      background: #dcdfe6;
    }
    div {
      height: 100%;
      padding: 0 10px;
      font-size: 18px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    // 选择
    // .switch {
    // }
    // 用户
    .user {
      display: flex;
      align-items: center;
      // 头像
      .head {
        width: 10px;
        height: 30px;
        border-radius: 50%;
        background: #409eff;
        margin-right: 4px;
      }
      // 用户名
      span {
        text-align: center;
        font-size: 14px;
      }
    }
  }
}
// 中英文选择
ul {
  padding: 0;
  margin-top: 8px;
  :first-child {
    margin-top: 1px;
  }
  li {
    border-radius: 3px;
  }
}
.el-popper{
  margin-top: 9px;
}
</style>
